<template>
  <div>
    <van-nav-bar title="首页" />

    <div class="wrap">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        background="transparent"
        shape="round"
      />
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
          <img :src="item" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, onMounted } from "vue";
import { useStore } from "vuex";
// import { bannerApi } from "@/utils/api";

export default defineComponent({
  setup() {
    // const bannerList = ref<string[]>([]);
    // onMounted(async () => {
    //   const res = await bannerApi({ a: 3 });
    //   bannerList.value = res.result.list;
    // });

    onMounted(() => {
      store.dispatch("index/getBannerAsync");
    });

    const store = useStore();

    const bannerList = computed(() => {
      return store.state.index.bannerList;
    });

    const value = ref<string>("");

    return { value, bannerList };
  },
});
</script>

<style lang="less" scoped>
.wrap {
  position: relative;
}

.van-search {
  position: absolute;
  width: 100%;
  z-index: 9;
}

/deep/.van-search__content {
  background: rgba(255, 255, 255, 0.4);
}

/deep/.van-field__control::placeholder {
  color: #fff;
}

.van-swipe-item {
  color: #fff;
  height: 220px;

  img {
    width: 100%;
    height: 100%;
  }
}

/deep/.van-swipe__indicator {
  width: 30px;
  height: 5px;
  background: red;
  border-radius: 0;
}
</style>
